var data2=[
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
  {name: "门诊部",sex: "有效",},
]
//当前页码
var page = 1;
// 每页的条数
var count = 10;
// 获取tbody
var oTBody = document.querySelector("tbody");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页
var oPrevBtn = document.querySelector(".prev");
//获取下一页
var oNextBtn = document.querySelector(".next");
//初始化

function render() {


  oTBody.innerHTML = "";

  var renderArr = data2.slice((page - 1) * count, page * count);
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement("tr");
    oTr.innerHTML = `
    <td><input type="checkbox" class="int"></td>
    <td>${renderArr[i].name}</td>
    <td>${renderArr[i].sex}</td>
    `;
    oTBody.appendChild(oTr);
  }
  //渲染页码
  //找到所有的1，2，3，4的页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  //删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  //根据数据的长度重新创建页码
  // console.log(Math.ceil(data2.length / count));
  for (var i = 1; i <= Math.ceil(data2.length / count); i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    //如果li和当前的页码一致，给他加一个选中的class
    if (i == page) {
      oLi.classList.add("active");
    }
    //在下一页的前面插入页码
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
render();
//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  //如果当前点击的按钮有pageBtn这个class名字
  if (event.target.className == "pageBtn") {
    //修改全局的page
    page = event.target.innerText;
    //渲染table，渲染分页
    render();
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  if (page < Math.ceil(data2.length / count)) {
    page++;
    render();
  }
}
// 添加按钮
var oTj=document.querySelector('.tj')
var addBox1=document.querySelector('#addTo-box1')
var oQx11=document.querySelector('#czd1 img')
var oQx21=document.querySelector('#qx1')
oTj.addEventListener('click',oTjFn)
oQx11.addEventListener('click',ycFN)
oQx21.addEventListener('click',ycFN)
function oTjFn(){
  addBox1.style.display= "flex";
}
function ycFN(){
  addBox1.style.display= "none";

}
// 添加数据
var otjMc=document.querySelector('#tjmc1')
var oZt11=document.querySelector('#zt11')
var oZt21=document.querySelector('#zt21')
var oBc=document.querySelector('#bc1')
var threeItem={
  name: "",sex: "",
}
oBc.addEventListener('click',oBcFn)
function oBcFn(){
  threeItem.name=otjMc.value
  if(oZt11.checked==true){
    threeItem.sex='有效'
  }else if(oZt21.checked==true){
    threeItem.sex='无效'
  }
  data2.unshift(threeItem)
  render()
  ycFN()
  threeItem={}
  otjMc.value=''
}
// 修改
var oXg=document.querySelector('.xg')
var addBox2=document.querySelector('#addTo-box2')
var oQx12=document.querySelector('#czd2 img')
var oQx22=document.querySelector('#qx2')
// 获取input
oXg.addEventListener('click',oXgFn)
oQx12.addEventListener('click',ycFN2)
oQx22.addEventListener('click',ycFN2)
function oXgFn(){
  
  addBox2.style.display= "flex";
}
function ycFN2(){
  addBox2.style.display= "none";
}

var oBc2=document.querySelector('#bc2')
oBc2.addEventListener('click',oBcFn2)
function oBcFn2(){
  var pMc1=document.querySelector('#mc1')
var zt=document.querySelectorAll('#ztt input')
var xInp=document.querySelectorAll('.int')
  for(var i=0;i<xInp.length;i++){
    if(xInp[i].checked){
      data2[i].name=pMc1.value
      if(zt[0].checked){
        data2[i].sex='有效'
      }else if(zt[1].checked){
        data2[i].sex='无效'
      }
      
    }
  }
  render()
  ycFN2()
}

// 删除
var oSc=document.querySelector('.sc')
oSc.addEventListener('click',oScFn)
function oScFn(){
  var xInp=document.querySelectorAll('.int')
  var j=0
  for(var i=0;i<xInp.length;i++){
    if(xInp[i].checked){
      var e=i-j
      data2.splice(e,1)
      j++
      
    }
  }
  render()
}
// 事件管理
var oSzqx=document.querySelector('.szqx')
var qxBox=document.querySelector('#qxx')
var qx3=document.querySelector('.qx3')
var img=document.querySelector('.imga')
oSzqx.addEventListener('click',oSzqxFn)
qx3.addEventListener('click',qxFn)
img.addEventListener('click',qxFn)
function oSzqxFn(){
  qxBox.style.display='flex';
}
function qxFn(){
  qxBox.style.display='none';
}

var oDiv=document.querySelectorAll('.iimm')
var lrr=document.querySelectorAll('.lrr')
for(var i=0;i<oDiv.length;i++){
  oDiv[i].onclick= function(){
    lrr[i].style.display='block'
  }
}
console.log(oDiv)